<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../jquery-3.4.1.min.js"></script>
		<style type="text/css">
		body{
			margin-bottom: 1000px;
		}
			.test{
				height: 200px;
				width: 200px;
				background-color: red;
				position: relative;
			}
		</style>
	</head>
	<body>
		<button type="button">点我</button>
		<button type="submit">点我啊</button>
		<button class="btn1">btn1</button>
		<div class="test">
			<ul>
				<li>测试1</li>
				<li>测试2</li>
				<li><a href="#">测试X</a></li>
			</ul>
		</div>
		
		<div id="div2">
			<h1>滑动</h1>
			<button type="button">btn1</button>
			<div class="div2-div test">
				
			</div>
		</div>

		<div id="div3">
			<h1>jQuery 动画 - animate() 方法</h1>
			<button type="button">div3</button>
			<button class="btn3" type="button">div4</button>
			<div class="div3 test"></div>
		</div>

		<div id="div4">
			<h1>链式调用</h1>
			<button type="button">测试</button>
			<div class="div4 test"></div>
		</div>

	</body>
	<script type="text/javascript">
		$(function(){
			$("button").click(function(){
				$("ul li:first").toggle()
			})
			$("[href]").click(function(){
				$(this).hide()
			})
			$(":submit").click(function(){
				$("ul li:first").show()
			})
			$(".btn1").click(function(){
				$(".test").fadeToggle(2000)
				$(".test").fadeTo('slow',0.12)
			})
			
			$("#div2 button").click(function(){
				$(".div2-div").slideToggle(2000)
			})

			// $("#div3 button").click(function () {
			// 	$(".div3").animate({left:'100px',width:'+=500px',height:'+=900px',opacity:'0.5'})
			// })
			$('.div3').click(function () {
				$(".div3").animate({
					width:'toggle'
				})
			})
			$("#div3 .btn3").click(function () { 
				$(".div3").animate({
					width:'toggle',
					height:'toggle',
				})
	
				alert("测试")
			});

			$("#div4 button").click(function () {
				$(".div4").css("background-color","blue").animate({
					width:'toggle',
					height:'toggle'
				}).slideToggle({left:'200px',width:'300px'})
			})
		})
	</script>
</html>
